	<script type="text/javascript">
		var index = 0;
		function addTab(){
			index++;
			$('#tt').tabs('add',{
				title:'New Tab ' + index,
				content:'Tab Body ' + index,
				iconCls:'icon-save',
				closable:true,
				tools:[{
					iconCls:'icon-mini-refresh',
					handler:function(){
						alert('refresh');
					}
				}]
			});
		}
		function getSelected(){
			var tab = $('#tt').tabs('getSelected');
			alert('Selected: '+tab.panel('options').title);
		}
		function update(){
			index++;
			var tab = $('#tt').tabs('getSelected');
			$('#tt').tabs('update', {
				tab: tab,
				options:{
					title:'new title'+index,
					iconCls:'icon-save'
				}
			});
		}
	</script>

	<h2>选项卡 - Tabs</h2>
	<div class="demo-info">
		<div class="demo-tip icon-tip"></div>
		<div>标签总和宽度超过他们的容器宽度尺寸将自动添加滚动条。<br>
		</div>
	</div>
	
	<div style="margin:10px 0">
		<a class="easyui-linkbutton" data-options="iconCls:'icon-add'" href="javascript:void(0)" onclick="addTab()">add tab</a>
		<a class="easyui-linkbutton" href="javascript:void(0)" onclick="getSelected()">getSelected</a>
		<a class="easyui-linkbutton" href="javascript:void(0)" onclick="update()">Update</a>
	</div>
	
	<div id="tt" class="easyui-tabs" data-options="tools:'#tab-tools'" style="width:700px;height:250px;">
		<div title="Tab1" data-options="tools:'#p-tools'" style="padding:20px;">
		</div>
		<div title="Tab2" data-options="closable:true,cache:false,href:'tabs_href_test.html'" style="padding:20px;">
			This is Tab2 with close button.
		</div>
		<div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;">
			<table id="test" class="easyui-datagrid" data-options="fit:true">
				<thead>
					<tr>
						<th data-options="field:'f1',width:60">field1</th>
						<th data-options="field:'f2',width:60">field2</th>
						<th data-options="field:'f3',width:60">field3</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>d1</td>
						<td>d2</td>
						<td>d3</td>
					</tr>
					<tr>
						<td>d11</td>
						<td>d21</td>
						<td>d31</td>
					</tr>
				</tbody>
			</table>
		</div>
		<div title="Tab4 with iframe" data-options="closable:true" style="overflow:hidden">
			<iframe scrolling="yes" frameborder="0"  src="http://www.jeasyui.com/forum/index.php" style="width:100%;height:100%;"></iframe>
		</div>
		<div title="Tab5 with sub tabs" data-options="closable:true,iconCls:'icon-cut'" style="padding:10px;">
			<div class="easyui-tabs" data-options="fit:true,plain:true">
				<div title="Title1" style="padding:10px;">Content 1</div>
				<div title="Title2" style="padding:10px;">Content 2</div>
				<div title="Title3" style="padding:10px;">Content 3</div>
			</div>
		</div>
	</div>
	
	<div id="tab-tools">
		<a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'" onclick="javascript:alert('add')"></a>
		<a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-save'" onclick="javascript:alert('save')"></a>
	</div>
	<div id="p-tools">
		<a href="#" class="icon-mini-add" onclick="alert('add')"></a>
		<a href="#" class="icon-mini-edit" onclick="alert('edit')"></a>
		<a href="#" class="icon-mini-refresh" onclick="alert('refresh')"></a>
	</div>
<h3>页面代码： </h3>
<pre name="code" class="html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
	&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot;&gt;
	&lt;title&gt;Tabs - jQuery EasyUI Demo&lt;/title&gt;
	&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;../themes/default/easyui.css&quot;&gt;
	&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;../themes/icon.css&quot;&gt;
	&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;demo.css&quot;&gt;
	&lt;script type=&quot;text/javascript&quot; src=&quot;../jquery-1.7.2.min.js&quot;&gt;&lt;/script&gt;
	&lt;script type=&quot;text/javascript&quot; src=&quot;../jquery.easyui.min.js&quot;&gt;&lt;/script&gt;
	&lt;script type=&quot;text/javascript&quot;&gt;
		var index = 0;
		function addTab(){
			index++;
			$('#tt').tabs('add',{
				title:'New Tab ' + index,
				content:'Tab Body ' + index,
				iconCls:'icon-save',
				closable:true,
				tools:[{
					iconCls:'icon-mini-refresh',
					handler:function(){
						alert('refresh');
					}
				}]
			});
		}
		function getSelected(){
			var tab = $('#tt').tabs('getSelected');
			alert('Selected: '+tab.panel('options').title);
		}
		function update(){
			index++;
			var tab = $('#tt').tabs('getSelected');
			$('#tt').tabs('update', {
				tab: tab,
				options:{
					title:'new title'+index,
					iconCls:'icon-save'
				}
			});
		}
	&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;h2&gt;选项卡 - Tabs&lt;/h2&gt;
	&lt;div class=&quot;demo-info&quot;&gt;
		&lt;div class=&quot;demo-tip icon-tip&quot;&gt;&lt;/div&gt;
		&lt;div&gt;标签总和宽度超过他们的容器宽度尺寸将自动添加滚动条。&lt;br&gt;
		&lt;/div&gt;
	&lt;/div&gt;
	
	&lt;div style=&quot;margin:10px 0&quot;&gt;
		&lt;a class=&quot;easyui-linkbutton&quot; data-options=&quot;iconCls:'icon-add'&quot; href=&quot;javascript:void(0)&quot; onclick=&quot;addTab()&quot;&gt;add tab&lt;/a&gt;
		&lt;a class=&quot;easyui-linkbutton&quot; href=&quot;javascript:void(0)&quot; onclick=&quot;getSelected()&quot;&gt;getSelected&lt;/a&gt;
		&lt;a class=&quot;easyui-linkbutton&quot; href=&quot;javascript:void(0)&quot; onclick=&quot;update()&quot;&gt;Update&lt;/a&gt;
	&lt;/div&gt;
	
	&lt;div id=&quot;tt&quot; class=&quot;easyui-tabs&quot; data-options=&quot;tools:'#tab-tools'&quot; style=&quot;width:700px;height:250px;&quot;&gt;
		&lt;div title=&quot;Tab1&quot; data-options=&quot;tools:'#p-tools'&quot; style=&quot;padding:20px;&quot;&gt;
		&lt;/div&gt;
		&lt;div title=&quot;Tab2&quot; data-options=&quot;closable:true,cache:false,href:'tabs_href_test.html'&quot; style=&quot;padding:20px;&quot;&gt;
			This is Tab2 with close button.
		&lt;/div&gt;
		&lt;div title=&quot;Tab3&quot; data-options=&quot;iconCls:'icon-reload',closable:true&quot; style=&quot;padding:20px;&quot;&gt;
			&lt;table id=&quot;test&quot; class=&quot;easyui-datagrid&quot; data-options=&quot;fit:true&quot;&gt;
				&lt;thead&gt;
					&lt;tr&gt;
						&lt;th data-options=&quot;field:'f1',width:60&quot;&gt;field1&lt;/th&gt;
						&lt;th data-options=&quot;field:'f2',width:60&quot;&gt;field2&lt;/th&gt;
						&lt;th data-options=&quot;field:'f3',width:60&quot;&gt;field3&lt;/th&gt;
					&lt;/tr&gt;
				&lt;/thead&gt;
				&lt;tbody&gt;
					&lt;tr&gt;
						&lt;td&gt;d1&lt;/td&gt;
						&lt;td&gt;d2&lt;/td&gt;
						&lt;td&gt;d3&lt;/td&gt;
					&lt;/tr&gt;
					&lt;tr&gt;
						&lt;td&gt;d11&lt;/td&gt;
						&lt;td&gt;d21&lt;/td&gt;
						&lt;td&gt;d31&lt;/td&gt;
					&lt;/tr&gt;
				&lt;/tbody&gt;
			&lt;/table&gt;
		&lt;/div&gt;
		&lt;div title=&quot;Tab4 with iframe&quot; data-options=&quot;closable:true&quot; style=&quot;overflow:hidden&quot;&gt;
			&lt;iframe scrolling=&quot;yes&quot; frameborder=&quot;0&quot;  src=&quot;http://www.jeasyui.com/forum/index.php&quot; style=&quot;width:100%;height:100%;&quot;&gt;&lt;/iframe&gt;
		&lt;/div&gt;
		&lt;div title=&quot;Tab5 with sub tabs&quot; data-options=&quot;closable:true,iconCls:'icon-cut'&quot; style=&quot;padding:10px;&quot;&gt;
			&lt;div class=&quot;easyui-tabs&quot; data-options=&quot;fit:true,plain:true&quot;&gt;
				&lt;div title=&quot;Title1&quot; style=&quot;padding:10px;&quot;&gt;Content 1&lt;/div&gt;
				&lt;div title=&quot;Title2&quot; style=&quot;padding:10px;&quot;&gt;Content 2&lt;/div&gt;
				&lt;div title=&quot;Title3&quot; style=&quot;padding:10px;&quot;&gt;Content 3&lt;/div&gt;
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;
	
	&lt;div id=&quot;tab-tools&quot;&gt;
		&lt;a href=&quot;#&quot; class=&quot;easyui-linkbutton&quot; data-options=&quot;plain:true,iconCls:'icon-add'&quot; onclick=&quot;javascript:alert('add')&quot;&gt;&lt;/a&gt;
		&lt;a href=&quot;#&quot; class=&quot;easyui-linkbutton&quot; data-options=&quot;plain:true,iconCls:'icon-save'&quot; onclick=&quot;javascript:alert('save')&quot;&gt;&lt;/a&gt;
	&lt;/div&gt;
	&lt;div id=&quot;p-tools&quot;&gt;
		&lt;a href=&quot;#&quot; class=&quot;icon-mini-add&quot; onclick=&quot;alert('add')&quot;&gt;&lt;/a&gt;
		&lt;a href=&quot;#&quot; class=&quot;icon-mini-edit&quot; onclick=&quot;alert('edit')&quot;&gt;&lt;/a&gt;
		&lt;a href=&quot;#&quot; class=&quot;icon-mini-refresh&quot; onclick=&quot;alert('refresh')&quot;&gt;&lt;/a&gt;
	&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
<SCRIPT type=text/javascript>
	dp.SyntaxHighlighter.ClipboardSwf = 'documentation/js/clipboard.swf'/*tpa=http://jeasyui.com/SyntaxHighlighter/Scripts/clipboard.swf*/;
	dp.SyntaxHighlighter.HighlightAll('code');
</SCRIPT>